<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="getSuggestion"
    >
      <!-- template只是一个包裹性质的容器，不会在页面中渲染的 -->
      <template #action>
        <div @click="clickBtn">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="this.keyword">
      <van-cell
        v-for="(item, index) in showSuggestion"
        :key="index"
        icon="search"
        @click="getSuggest(index)"
      >
        <div v-html="item"></div>
        </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"> </van-cell>
      <van-cell v-for="(item, index) in history" :key="index" :title="item" @click="clickHistory(item)">
        <van-icon @click.stop="del(item)" name="close" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqGetSuggestion } from '@/api/search.js'
import { setHistory, getHistory } from '@/utils/storage.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      suggestion: [], // 联想建议
      history: getHistory(), // 搜索记录 通过本地历史获取
      timeId: null // 延时器
    }
  },
  computed: {
    // 基于返回的suggestion, 动态计算出用于渲染的高亮的showSuggestion
    // showSuggestion () {
    //   const regExp = new RegExp(this.keyword, 'gi')
    //   // 这个  return 是计算属性的
    //   return this.suggestion.map((item) => {
    //     // 这个  return 是map函数的
    //     return item.replace(regExp, (match) => {
    //       // 这个  return 是replace方法
    //       return `<span style="color: red;">${match}</span>`
    //     })
    //   })
    // }
    // 基于返回的suggestion, 动态计算出用于渲染的高亮的showSuggestion
    showSuggestion () {
      const regExp = new RegExp(this.keyword, 'gi')
      const arr = this.suggestion.map(item => {
        const newStr = item.replace(regExp, (match) => {
          return `<span style="color: red;">${match}</span>`
        })
        return newStr
      })
      return arr
    }
  },
  methods: {
    // 注册input事件 发送请求
    // 获取联想建议
    getSuggestion () {
      // 判断搜索框是否为空  为空 不发送
      // 小优化 这个里删除完了还会发送请求 可以在放定时器里
      if (!this.keyword) {
        this.suggestion = []
        return
      }
      // 先清除定时器任务
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        const {
          data: {
            data: { options }
          }
        } = await reqGetSuggestion(this.keyword)
        console.log(options)
        this.suggestion = options
      })
    },
    // 点击搜索按钮
    clickBtn () {
      if (!this.keyword) return
      this.addHistory(this.keyword)
    },
    // 点击了联想建议
    getSuggest (index) {
      this.addHistory(this.suggestion[index])
    },
    // 追加历史记录的方式 以及跳转网页
    addHistory (str) {
      // 待定优化项
      // this.keyword = []
      this.history.unshift(str)
      // 用去搜索的去重以及展开运算伪数组转真数组
      this.history = [...new Set(this.history)]
      // 存储历史
      setHistory(this.history)
      this.$router.push(`/searchResult?keyword=${str}`)
    },
    // 删除历史记录
    del (str) {
      const res = this.history.filter(item => item !== str)
      this.history = res
      // 存储历史
      setHistory(this.history)
    },
    // 点击历史记录跳转
    clickHistory (str) {
      this.addHistory(str)
    }
  }
}
</script>

<style lang="scss" scoped>
// 控制头部导航栏的通用样式
</style>
